<template name='header_lid'>
<view >
	<view class="boxB">
		<text selectable="true"  class="tips h10 font18">管理</text>
		<!-- 类目排序 -->
		<view class="add-box-lib ">
			<view class="header-lib">
				<view class="letTitle">
					空白分类目录:
				</view>
				<view @click="deleteGoodsHeader()" class="add_color but-add " >
					删除
				</view>
			</view>
		</view>
		<view class="add-box-lib ">
			<view class="header-lib">
				<view class="letTitle">
					AI智能大数据目录管理系统:
				</view>
				<view @click="$refs.ai_header.open()" class="add_color but-add " >
					打开
				</view>
			</view>
		</view>
	</view>
	
	
	<view class="boxB">
		<text selectable="true"  class="tips h10 font18">商品类目管理</text>
	
		<!-- 类目排序 -->
		<view class="add-box-lib ">
			<view class="header-lib">
				<view class="letTitle">
					类目排序:
				</view>
				<view @click="selectSortType(1)" class="add_color but-add " >
					编辑
				</view>
				<text selectable="true"  class="tips">关乎到商城首页，列表的商品排序算法。</text>
			</view>
		</view>
		<!-- 类目排序弹出窗 -->
		<uni-popup ref="headerSort" type="center" title="类目排序" >
			<!-- 数据列表 -->
			<view class="box-infos font12" >
				
				<view class="content-box font12" >
					<view class="boxsss40" >
						<table >
							<!-- 表头 -->
							<thead>
								<tr >
									<th style="min-width: 20px;">序</th>
									<th>类目</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<!-- 内容 -->
								<tr :class="sortHeader.idSort==item.id ?'goods-list-select':''"
								v-for="(item,index) in sortHeader.list" 
								:key="index"
								>
									<td>{{index+1}} </td>
									<td >
										{{item.name}}
									</td>
									<td  >
										<view class="centers flex" >
											<view class="margin cursor alter" @click="seleSortAdd(index,item.id)">
												上移
											</view>
											<view class="margin cursor alter" @click="seleSortDeduct(index,item.id)">
												下移
											</view>
										</view>
									</td>
								</tr>
							</tbody>
						</table>
					
					</view>
					
					<view @click="SureSort" class="add_color but-add " >
						确定排序
					</view>
				</view>
			</view>
			<!-- 数据列表end -->
		</uni-popup>
		<!-- end -->
		
		<!-- 分类处理 -->
		<view class="add-box-lib ">
			<view class="header-lib">
				<view class="letTitle">
					新增商品分类:
				</view>
				<input 
				v-model="header_add" 
				 placeholder="输入分类的名称"
				 placeholder-class="placeholder-class"
				 @confirm="fun_header_add"
				 class="fenleiBox fenleiBoxColor"  />
				<view @click="fun_header_add" class="add_color but-add " >
					新增
				</view>
				<view class="fenleiBox  " >
					<!-- 占位 -->
				</view>
				<view class="fenleiBox  " >
					<!-- 占位 -->
				</view>
			</view>
		</view>
		<!-- 删除分类 -->
		<view class="add-box-lib ">
			<view class="header-lib">
				<view class="letTitle">
					删除分类:
				</view>
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(1)">
					<view  class="justify h32" v-if="header.index>-1">
						{{headerList[header.index].name}}
					</view>
					<view  class="justify h32 font12" v-if="header.index<0">
						请选择分类
					</view>
				</view>
				<view @click="fun_headerDelete" class="back_color but-add " >
					删除
				</view>
				<view class="fenleiBox  " >
					<!-- 占位 -->
				</view>
				<view class="fenleiBox  " >
					<!-- 占位 -->
				</view>
			</view>
		</view>	
		<!-- 修改分类名称 -->
		<view class="add-box-lib ">
			<view class="header-lib">
				
				<view class="letTitle">
					修改分类名称:
				</view>
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(1)">
					<view  class="justify h32" v-if="header.index>-1">
						{{headerList[header.index].name}}
					</view>
					<view  class="justify h32 font12" v-if="header.index<0">
						请选择分类
					</view>
				</view>
				<input 
				v-model="header_up" 
				 placeholder="输入分类名称"
				 placeholder-class="placeholder-class"
				 @confirm="fun_header_up"
				 class="fenleiBox fenleiBoxColor"  />
				<view @click="fun_header_up" class="back_color but-add " >
					修改
				</view>
				<view class="fenleiBox  " >
					<!-- 占位 -->
				</view>
			</view>
		</view>	
		<!-- end -->
		<!-- 修改 分类 图片 -->
		<view class="add-box-lib">
			
			<view class="header-lib">
				
				<view class="letTitle">
					修改分类图片:
				</view>
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(1)">
					<view  class="justify h32" v-if="header.index>-1">
						{{headerList[header.index].name}}
					</view>
					<view  class="justify h32 font12" v-if="header.index<0">
						请选择分类
					</view>
				</view>
				
				<view @click="$common.noMultipleClicks('chooseImageHeader',chooseImageHeader)" class="add_color but-add " >
					选择图片
				</view>
				<view class="fenleiBox  " >
					<!-- 占位 -->
				</view>
			</view>
		</view>	
		<!-- 分类 图片 -->
		<view class="add-box-lib" v-if="header.index>-1 ">
			<view class="header-lib">
				{{headerList[header.index].name}} | 分类图片
			</view>
			<img :src="headerList[header.index].avatar" class="justify" style="margin: auto;width: 100px;height: 100px;"></img>
		</view>	
		<!-- end -->
	</view>
	
	<view class="boxB">
		<!-- <view class="h10"></view> -->
		<text selectable="true"  class="tips h10 font18">商品目录管理</text>
		<!-- 目录排序 -->
		<view class="add-box-lib ">
			<view class="header-lib">
				<view class="letTitle">
					目录排序:
				</view>
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(1)">
					<view  class="justify h32" v-if="header.index>-1">
						{{headerList[header.index].name}}
					</view>
					<view  class="justify h32 font12" v-if="header.index<0">
						请选择分类
					</view>
				</view>
				<view @click="selectSortType(2)"  class="add_color but-add " >
					编辑
				</view>
				
				
				<view class="fenleiBox  " >
					<!-- 占位 -->
					<text selectable="true"  class="tips">关乎到商城首页，列表的商品排序算法。</text>
				</view>
				<view class="fenleiBox  " >
					<!-- 占位 -->
				</view>
			</view>
		</view>
		<!-- 目录处理 -->
		<view class="add-box-lib">
			<view class="header-lib">
				<view class="letTitle">
					新增商品目录:
				</view> 
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(1)">
					<view  class="justify h32" v-if="header.index>-1">
						{{headerList[header.index].name}}
					</view>
					<view  class="justify h32 font12" v-if="header.index<0">
						请选择分类
					</view>
				</view>
				<input 
				v-model="directory_add" 
				placeholder="输入目录名称"
				placeholder-class="placeholder-class"
				@confirm="fun_directory_add"
				class="fenleiBox fenleiBoxColor"  />
				
				<view @click="$common.noMultipleClicks('fun_directory_add',fun_directory_add)" class="add_color but-add " >
					确定
				</view>
				<view class="fenleiBox " >
					<!-- 占位 -->
				</view>
			</view>
		</view>
		<!-- 删除目录 -->
		<view class="add-box-lib">
			<view class="header-lib">
				<view class="letTitle">
					删除目录:
				</view>
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(1)">
					<view  class="justify h32" v-if="header.index>-1">
						{{headerList[header.index].name}}
					</view>
					<view  class="justify h32 font12" v-if="header.index<0">
						请选择分类
					</view>
				</view>
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(2)">
					
					<view  class="justify h32" v-if="header.index>-1 && directory.index>-1">
						{{headerList[header.index].list[directory.index].name}}
					</view>
					<view  class="justify h32 font12" v-if=" directory.index<0">
						请选择目录
					</view>
				</view>
				<view @click="$common.noMultipleClicks('fun_directoryDelete',fun_directoryDelete)" class="back_color but-add " >
					删除
				</view>
				<view class="fenleiBox  " >
					<!-- 占位 -->
				</view>
			</view>
		</view>
		<!-- 修改目录名称 -->
		<view class="add-box-lib">
			<view class="header-lib">
				<view class="letTitle">
					修改目录名称:
				</view>
				<view class="fenleiBox fenleiBoxColor " @click="fun_select(1)">
					<view  class="justify h32" v-if="header.index>-1">
						{{headerList[header.index].name}}
					</view>
					<view  class="justify h32 font12" v-if="header.index<0">
						请选择分类
					</view>
				</view>
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(2)">
					
					<view  class="justify h32" v-if="header.index>-1 && directory.index>-1">
						{{headerList[header.index].list[directory.index].name}}
					</view>
					<view  class="justify h32 font12" v-if=" directory.index<0">
						请选择目录
					</view>
				</view>
				<input 
				v-model="directory_up" 
				 placeholder="输入目录名称"
				 placeholder-class="placeholder-class"
				 
				 @confirm="fun_directory_up"
				 class="fenleiBox fenleiBoxColor"  />
				<view @click="$common.noMultipleClicks('fun_directory_up',fun_directory_up)" class="back_color but-add " >
					修改
				</view>
			</view>
		</view>
		
		
		<!-- 修改目录图片 -->
		<view class="add-box-lib">
			
			<view class="header-lib">
				
				<view class="letTitle">
					修改目录图片:
				</view>
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(1)">
					<view  class="justify h32" v-if="header.index>-1">
						{{headerList[header.index].name}}
					</view>
					<view  class="justify h32 font12" v-if="header.index<0">
						请选择分类
					</view>
				</view>
				<view class="fenleiBox fenleiBoxColor" @click="fun_select(2)">
					
					<view  class="justify h32" v-if="header.index>-1 && directory.index>-1">
						{{headerList[header.index].list[directory.index].name}}
					</view>
					<view  class="justify h32 font12" v-if="directory.index<0">
						请选择目录
					</view>
				</view>
				<view @click="$common.noMultipleClicks('chooseImage',chooseImage)" class="add_color but-add " >
					选择图片
				</view>
				<view class="fenleiBox  " >
					<!-- 占位 -->
				</view>
			</view>
		</view>	
		<!-- 目录图片 -->
		<view class="add-box-lib" v-if="header.index>-1 && directory.index>-1">
			<view class="header-lib">
				{{headerList[header.index].list[directory.index].name}} | 目录图片
			</view>
			<img :src="headerList[header.index].list[directory.index].image" class="justify" style="margin: auto;width: 100px;height: 100px;"></img>
		</view>	
		<!-- end -->
		
	</view>
	<!-- 选择分类 遮罩层 -->
	<uni-popup ref="select_header" type="center" title="选择" >
		<view class="box-infos">
			<view class="justify margin gap10" style="width: 500px;">
				<view class="bottom20 list_detail"
				@click="selectListIndex(index,item.name,item.id)" 
				v-for="(item,index) in selectList" :key="index">
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		<empty v-if="selectList.length==0"></empty>
	</uni-popup>

		<!-- 商品卡密 -->
		<uni-popup  ref="ai_header" type="center" title="分类智能管理" >
			<ai_header></ai_header>
		</uni-popup>
		<!-- end -->
</view>
</template>

<script>
	import ai_header from "@/components/goods/ai_header.vue"
	import empty from "@/components/admin-components/empty.vue"
	export default{
		name:'header_lid',
		components: {
			empty,ai_header
		},
		data(){
			return{
				CopyFirmGoodsValue:'',
				CopyFirmId:'',
				header_add:'',//新增分类
				header_up:'',//修改分类
				
				directory_add:'',//新增目录
				directory_up :'',//修改目录
				
				headerList:[],//分类
				selectList:[],//弹窗进行选择的数组
				header:{//当前选中的分类
					index:-1,
					id:'',
				},
				directory:{//当前选中的分类
					index:-1,
					id:'',
				},
				nowClickType:1,//当前正在选择的类型
				sortHeader:{//正在排序的分类或目录
					list:[],
					type:1,//分类=1 目录=2
					idSort:-1,//当前选中的排序项
				},
			}
		},
		 // 此处定义传入的数据
		props: {
		},
		created() {
			this.loadHeader()
		},
		methods:{
			onUpdate(){
				this.$emit('onUpdate','') //(父组件中触发的事件名，要传的变量名)
			},
			/**
			 * 开始排序
			*/
			selectSortType(type){
				if(type==1){
					this.sortHeader.list = this.headerList
				}else{
					if(this.header.index == -1){
						this.$common.toast("请先选择分类再操作")
						return
					}
					this.sortHeader.list = this.headerList[this.header.index].list
				}
				this.sortHeader.type = type//赋值类型，分类或目录
				this.$refs.headerSort.open()
			},
			//分类- 把所有的商品进行获取分类，第一步(清空分类)
			deleteGoodsHeader(){
				var that = this
				that.$common.get_request(
					{
						type: 'DeleteEmptyDirectoryOrHeaderAndCount0',
					},
					(res)=>{
						that.loadHeader()
					},()=>{},true,"","请不要关闭此窗口(初始化分类中...)",0,180000
				);
			},
			/**
			 * 排序-确定
			*/
			SureSort(){
				var that = this
				var jsonData = [];
				const list = that.sortHeader.list;  
				list.forEach((item,index)=>{
					jsonData.push({id:item.id,sort:index})
				})
				var moveType = this.sortHeader.type==1?'header':'directory'
				that.$common.get_request(
					{type:'headerSort',move_type:moveType,data:JSON.stringify(jsonData)},
					(res)=>{
						that.$common.toast(res.msg)
					}
				);
			},
			/**
			 * 目录排序-上移
			*/
			seleSortAdd(index,id){
				if (index-1 <0) {  
					return 
				}
				this.sortHeader.idSort = id
				const item = this.sortHeader.list[index];  
				this.$set(this.sortHeader.list, index, this.sortHeader.list[index - 1]);  
				this.$set(this.sortHeader.list, index - 1, item);  
			},
			/**
			 * 目录排序-下移
			*/
			seleSortDeduct(index,id){
				if (index+1 >= this.sortHeader.list.length ) {  
					return 
				}
				this.sortHeader.idSort = id
				const item = this.sortHeader.list[index];  
				this.$set(this.sortHeader.list, index, this.sortHeader.list[index + 1]);  
				this.$set(this.sortHeader.list, index + 1, item);  
			},
			/**
			 * 图片-预览
			*/
			previewImage(){
				var that = this
				var imgArr= []
				 
				for (var i=0;i<that.previewImageData.list.length;i++) {
					imgArr.push(that.previewImageData.list[i].source)
				}
				uni.previewImage({
					urls:imgArr,
					fail:(e)=>{
					}
				})
			},
			/**
			 * 目录图片上传-选择图片
			 * 
			*/
			chooseImage(){
				var that = this
				uni.chooseImage({
					count:1,
					sizeType: ['compressed'], //original 原图，compressed 压缩图，
					success:(e)=>{
						
						that.$common.uploadFile(
						e.tempFilePaths[0],
						{
							type:'directory_up_img',
							id:that.directory.id,
						},
						(res)=>{
							that.loadHeader()
							that.headerList[header.index].list[directory.index].image = res.image
							that.$set(that.headerList[header.index].list,directory.index,that.headerList[header.index].list[directory.index])
						},)
					},
					fail:(res)=>{
						if(res.errMsg){
							uni.showModal({
									title:'错误',
									content:res.errMsg,
									showCancel:false
							});
						}
					}
				})
			},
			
			/**
			 * 目录图片上传-选择图片
			 * 
			*/
			chooseImageHeader(){
				var that = this
				uni.chooseImage({
					count:1,
					sizeType: ['compressed'], //original 原图，compressed 压缩图，
					success:(e)=>{
						
						that.$common.uploadFile(
						e.tempFilePaths[0],
						{
							type:'header_up_img',
							id:that.header.id,
						},
						(res)=>{
							that.loadHeader()
							that.headerList[header.index].image = res.image
						},)
					},
					fail:(res)=>{
						if(res.errMsg){
							uni.showModal({
									title:'错误',
									content:res.errMsg,
									showCancel:false
							});
						}
					}
				})
			},
			
			/**
			 * 选中了
			 * 
			*/
			selectListIndex(index,name,id){
				var that = this
				if(that.nowClickType==1){
					that.header.index = index
					that.header.id = id
					//选择了分类后清空目录列表；初始化
					that.directory.index = -1
					that.directory.id = ''
				}else{
					that.directory.index = index
					that.directory.id = id
				}
				that.$refs.select_header.close()
			},
			/**
			 * 即将弹窗分类选择
			 * 
			*/
			fun_select(type=1){
				var that = this
				that.nowClickType = type
				if(that.nowClickType==1){
					that.selectList = that.headerList
					
				}else{
					if(that.header.index == -1){
						that.$common.toast("请先选择分类再选择目录")
						return
					}
					that.selectList = that.headerList[that.header.index].list
				}
				that.$refs.select_header.open()
			},
			/**
			 * 读取分类
			 * 
			*/
			loadHeader(){
				var that = this
				that.$common.get_request(
					{type:'goods_header_list'},
					(res)=>{
						that.headerList = res.list
						
						that.onUpdate()
					}
				);
			},
			/**
			 * 分类新增
			 * 
			*/
			fun_header_add(){
				var that = this
				if(that.header_add == ''){
					that.$common.toast("请先填写欲要新增的分类名称")
					return ;
				}
				that.$common.get_request(
					{
						type:'header_add',
						name:that.header_add,
					},
					(res)=>{
						that.loadHeader()
					}
				);
			},
			/**
			 * 分类 删除
			 * 
			*/
			fun_headerDelete(){
				var that = this
				if(that.header.id == ''){
					that.$common.toast("请先选择欲要删除的分类")
					return ;
				}
				uni.showModal({
					content: '是否确定删除？此操作不可逆。删除后有关信息无法恢复！',
					success: function (res) {
						if (res.confirm) {
							that.$common.get_request(
								{type:'header_de',id:that.header.id},
								(res)=>{
									that.header.id=""
									that.header.index=-1
									that.loadHeader()
								}
							);
						}
					}
				});
			},
			/**
			 * 分类修改
			 * 
			*/
			fun_header_up(){
				var that = this
				if(that.header_up == '' || that.header.id == ''){
					that.$common.toast("请先填写欲要修改的分类名称")
					return ;
				}
				that.$common.get_request(
					{
						type:'header_up',
						id:that.header.id,
						name:that.header_up,
					},
					(res)=>{
						that.loadHeader()
					}
				);
			},
			/**
			 * 目录新增
			 * 
			*/
			fun_directory_add(){
				var that = this
				if(that.header.id == ''){
					that.$common.toast("请先选择所属分类")
					return ;
				}
				if(that.directory_add == ''){
					that.$common.toast("请填写目录名称")
					return ;
				}
				that.$common.get_request(
					{
						type:'directory_add',
						name:that.directory_add,
						id:that.header.id,
					},
					(res)=>{
						that.loadHeader()
					}
				);
			},
			/**
			 * 导入其他仓库的商品
			 * 
			*/
			fun_CopyFirmGoodsValue(){
				var that = this
				if(that.CopyFirmGoodsValue == '' || that.directory.id == ''){
					that.$common.toast("请先填写分类名称")
					return ;
				}
				that.$common.get_request(
					{
						type:'CopyFirmGoodsValue',
						header:that.headerList[that.header.index].id,
						directory:that.directory.id,
						name:that.CopyFirmGoodsValue,
					},
					(res)=>{
						that.$common.toast(res.msg)
					}
				);
			},
			/**
			 * 目录修改
			 * 
			*/
			fun_directory_up(){
				var that = this
				if(that.directory_up == '' || that.directory.id == ''){
					that.$common.toast("请先填写欲要修改的分类名称")
					return ;
				}
				that.$common.get_request(
					{
						type:'directory_up',
						id:that.directory.id,
						name:that.directory_up,
					},
					(res)=>{
						that.loadHeader()
					}
				);
			},
			
			/**
			 * 目录删除
			 * 
			*/
			fun_directoryDelete(){
				var that = this
				if(that.directory.id == ''){
					that.$common.toast("请先选择欲要删除的目录")
					return ;
				}
				uni.showModal({
					content: '是否确定删除？此操作不可逆。删除后有关信息无法恢复！',
					success: function (res) {
						if (res.confirm) {
							that.$common.get_request(
								{type:'directory_de',id:that.directory.id},
								(res)=>{
									that.directory.id=""
									that.directory.index=-1
									that.loadHeader()
								}
							);
						}
					}
				});
			}
		}
	}
</script>

<style>
	.add-box-lib{
		/* border-bottom: 1px solid #eee; */
		color: #1b1b1b;
		font-size: 15px;
		padding: 5px 0px;
		/* margin: 0px 20px; */
		display:flex;
		width: 100%;
	}
	.boxB{
		background-color: #fff;
		padding: 10px;
		border-radius: 5px;
		margin: 10px;
	}
	.letTitle{
		min-width: 100px;
		display: flex;
		justify-content: right;
	}

	.fenleiBox{
		    min-width: 150px;
		    border-radius: 8px;
		    margin-left: 10px;
		    height: 30px;
		    flex: 1;
		    padding: 0px 10px;
		   
		    display: flex;
		    justify-content: center;
		    flex-direction: column;
			width: 250px;
	}
	.fenleiBoxColor{
		background-color: #f5f7fa;
		border: 1px solid #d2d2d2;
	}
</style>
